<script setup>
import { ref, onMounted } from 'vue'
import { ElTable, ElTableColumn, ElPagination, ElInput, ElButton, ElIcon } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import scheduleApi from '../../../api/schedule.js'

// 定义表格数据
const scheduleData = ref([])
// 分页数据
const pagination = ref({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

// 搜索关键词
const searchParams = ref({
  courseName: '',
  className: '',
  teacherName: ''
})
// 加载状态
const loading = ref(false)

// 获取课程表分页数据
const getScheduleData = async (pageNum = 1, pageSize = 5, params = {}) => {
  loading.value = true
  try {
    const response = await scheduleApi.getSchedulePage(
        pageNum,
        pageSize,
        params.courseName || '',
        params.className || '',
        params.teacherName || ''
    )

    // 处理返回的数据
    if (response && response.code === 200) {
      // 正确处理MyBatis-Plus的Page对象
      scheduleData.value = response.data.records || []
      pagination.value.total = response.data.total || 0
    } else {
      console.error('获取课程表数据失败:', response?.msg || '未知错误')
    }
  } catch (error) {
    console.error('请求课程表数据时发生错误:', error)
  } finally {
    loading.value = false
  }
}

// 分页变化时触发
const handleCurrentChange = (currentPage) => {
  pagination.value.currentPage = currentPage
  getScheduleData(currentPage, pagination.value.pageSize, searchParams.value)
}

// 每页条数变化时触发
const handleSizeChange = (pageSize) => {
  pagination.value.pageSize = pageSize
  getScheduleData(pagination.value.currentPage, pageSize, searchParams.value)
}

// 搜索课程表
const handleSearch = () => {
  pagination.value.currentPage = 1
  getScheduleData(1, pagination.value.pageSize, searchParams.value)
}

// 重置搜索条件
const handleReset = () => {
  searchParams.value = {
    courseName: '',
    className: '',
    teacherName: ''
  }
  pagination.value.currentPage = 1
  getScheduleData(1, pagination.value.pageSize, searchParams.value)
}

// 初始加载数据
onMounted(() => {
  getScheduleData()
})
</script>

<template>
  <div class="course-schedule-container">
    <div class="search-bar">
      <ElInput
          v-model="searchParams.className"
          placeholder="请输入班级名称"
          class="search-input"
          :prefix-icon="Search"
      />
      <ElInput
          v-model="searchParams.courseName"
          placeholder="请输入课程名称"
          class="search-input"
          :prefix-icon="Search"
      />
      <ElInput
          v-model="searchParams.teacherName"
          placeholder="请输入教师姓名"
          class="search-input"
          :prefix-icon="Search"
      />
      <ElButton type="primary" @click="handleSearch">搜索</ElButton>
      <ElButton @click="handleReset">重置</ElButton>
    </div>

    <ElTable
        :data="scheduleData"
        style="width: 100%"
        v-loading="loading"
        element-loading-text="加载中..."
    >
<!--      <ElTableColumn prop="id" label="排课ID" width="80" />-->
      <ElTableColumn prop="className" label="班级名称" width="180" />
      <ElTableColumn prop="courseName" label="课程名称" width="180" />
      <ElTableColumn prop="teacherName" label="教师姓名" width="120" />
      <ElTableColumn label="上课信息" width="400">
        <!-- 使用正确的作用域插槽语法 -->
        <template #default="scope">
          <!-- 先判断scope和scope.row是否存在，避免报错 -->
          <template v-if="scope && scope.row">
            <div>{{ scope.row.startWeek }}-{{ scope.row.endWeek }}周</div>
            <div>星期{{ scope.row.day }}</div>
            <div>第{{ scope.row.startTime }}-{{ scope.row.endTime }}节</div>
            <div>上课地点：{{ scope.row.classroom }}</div>
          </template>
        </template>
      </ElTableColumn>
<!--      <ElTableColumn prop="startWeek" label="开始周" width="80" />-->
<!--      <ElTableColumn prop="endWeek" label="结束周" width="80" />-->
<!--      <ElTableColumn prop="day" label="星期几" width="80" />-->
<!--      <ElTableColumn prop="startTime" label="开始节次" width="100" />-->
<!--      <ElTableColumn prop="endTime" label="结束节次" width="100" />-->
<!--      <ElTableColumn prop="classroom" label="教室" width="150" />-->
    </ElTable>

    <div class="pagination-container">
      <ElPagination
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style>
.course-schedule-container {
  padding: 20px;
}

.search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}

.search-input {
  width: 200px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>